<template>
  <a-modal
    title="人员社会关系导入"
    :width="400"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="12">
        <a-col :sm="24" :md="17" :xl="17">
          <a-alert message="请严格按照导入模板填写" banner />
        </a-col>
        <a-col :sm="24" :md="7" :xl="7">
          <a href="/file/3.导入模板-社会关系.xls">[模板下载]</a>
        </a-col>
      </a-row>
      <br />
      <div class="clearfix">
        <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" accept=".xls,.xlsx">
          <a-button> <a-icon type="upload" /> 选择文件 </a-button>
        </a-upload>
        <a-button
          type="primary"
          :disabled="fileList.length === 0"
          :loading="uploading"
          style="margin-top: 16px"
          @click="handleUpload"
        >
          {{ uploading ? '上传中...' : '开始上传' }}
        </a-button>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { importRelation } from '@/api/basic/soldier'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      fileList: [],
      uploading: false
    }
  },
  methods: {
    show () {
      this.visible = true
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleUpload () {
      const { fileList } = this
      const formData = new FormData()
      let isLt5M = false
      fileList.forEach(file => {
        isLt5M = file.size / 1024 / 1024 < 5
        if (!isLt5M) {
          this.$message.error('文件大小不能超过5M，请确认数据后上传!')
        }
        if (isLt5M) {
          formData.append('relationExcel', file)
          importRelation(formData)
            .then(res => {
              if (res.message !== 'error') {
                this.$notification.open({
                  message: '提示',
                  description: res.objResult,
                  duration: 0
                })
                this.$emit('ok')
              } else {
                this.$message.error('操作失败！')
              }
            })
          this.$message.success('文件正在导入，请耐心等待')
          this.visible = false
          this.confirmLoading = false
          this.fileList = []
          this.uploading = false
        } else {
          this.fileList = []
          this.uploading = false
          return false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
